<template>
	<view style="background: #F0E3CE;min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/'+skin+'_goodindex_bgc.png)','background-size':'100%',}">

		<!-- 判断是不是新年皮肤  选择滚动条的位置 -->
		<view class="padding-top-80 margin-auto w-480">

			<!-- 新年皮肤 -->
			<view class="" v-if="skin == 'newyear'">
				<u-notice-bar :text="explain2" bgColor="" color="#fff"></u-notice-bar>
			</view>


			<view class="" v-else>
				<!-- 经典皮肤 -->
				<u-notice-bar :text="explain2" v-if="skin == 'classics'"></u-notice-bar>

				<!-- 春季皮肤 -->
				<u-notice-bar :text="explain2" bgColor="rgba(27,67,27, .4)" color="#fff"
					v-if="skin == 'qing'"></u-notice-bar>

				<!-- 冬季皮肤 -->
				<u-notice-bar :text="explain2" bgColor="rgba(157,183,223, .5)" color="#fff"
					v-if="skin == 'winter'"></u-notice-bar>

				<!-- 夏季皮肤 -->
				<u-notice-bar :text="explain2" bgColor="rgba(157,183,223, .5)" color="#fff"
					v-if="skin == 'summer'"></u-notice-bar>
			</view>
		</view>

		<!-- 判断是不是新年皮肤  选择按钮样式 -->
		<view class="">
			<view class="padding-top-30 flex-between padding-left-60 padding-right-60" v-if="skin == 'newyear'">
				<view class="" v-for="(item,index) in 5" :key="index" @click="topicon(index)">
					<image class="w-78 h-88" :src="Imgbase + '/newyear_goodindex_icon' +(index + 1)+'.png'"
						mode="aspectFit">
					</image>
				</view>
			</view>

			<view class="padding-top-30 flex-between padding-left-60 padding-right-60" v-if="skin == 'qing'">
				<view class="" v-for="(item,index) in 5" :key="index" @click="topicon(index)">
					<image class="w-78 h-88" :src="Imgbase + '/qing_goodindex_icon' +(index + 1)+'.png'"
						mode="aspectFit">
					</image>
				</view>
			</view>

			<view class="padding-top-30 flex-between padding-left-60 padding-right-60" v-if="skin == 'summer'">
				<view class="" v-for="(item,index) in 5" :key="index" @click="topicon(index)">
					<image class="w-78 h-88" :src="Imgbase + '/summer_goodindex_icon' +(index + 1)+'.png'"
						mode="aspectFit">
					</image>
				</view>
			</view>

			<view class="padding-top-30 flex-between padding-left-60 padding-right-60"
				v-if="skin == 'winter'||skin == 'classics'">
				<view class="" v-for="(item,index) in 5" :key="index" @click="topicon(index)">
					<image v-if="index == 1" class="w-78 h-88" :src="Imgbase + '/new_goodindex_img5n.png'"
						mode="aspectFit">
					</image>

					<image v-else class="w-78 h-88" :src="Imgbase + '/new_goodindex_img' +(index + 4)+'.png'"
						mode="aspectFit">
					</image>
				</view>
			</view>
		</view>

		<view class="padding-top-15" style="position: relative;">
			<!-- 轮播 -->
			<view style="border-radius: 12px;overflow: hidden;height: 275rpx;width: 94%;margin: 0 auto;">
				<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index" @click="showSwiper(item.navi_url)">
						<image :src="item.adimage" style="height: 100%;width: 100%;" mode="" v-if="item.type=='image'">
						</image>
						<video :src="item.adimage" autoplay loop muted :show-play-btn="false" :controls="false"
							objectFit="cover" v-if="item.type=='video'"></video>
					</swiper-item>
				</swiper>
			</view>

			<view class="winter_img w-200 h-200" v-if="skin == 'winter'">
				<image class="h100 w100" :src="Imgbase + '/winter_goodindex_img1.png'" mode="aspectFit">
				</image>
			</view>
		</view>

		<view class="" style="position: relative;">
			<view class="" style="position: relative;z-index:5;">

				<!-- 经典皮肤 -->
				<scroll-view scroll-x class="nav Afont  padding-left-30 padding-bottom-30" scroll-with-animation
					:scroll-left="scrollLeft" v-if="skin == 'classics'">
					<view class="sw_choose_default padding-top-20 " :class="index==TabCur?'sw_choose':'sw_nochoose'"
						v-for="(item,index) in tap" :key="index" @tap="tabSelect" :data-id="index">
						{{tap[index]}}
						<view class="h-6 w-40 " style="background-color: #8B5F52;margin: 10rpx auto 0;"
							v-show="index==TabCur">

						</view>
					</view>
				</scroll-view>

				<!-- 新年皮肤 -->
				<scroll-view scroll-x class="nav Afont  padding-left-30 padding-bottom-30" scroll-with-animation
					:scroll-left="scrollLeft" v-if="skin == 'newyear'">
					<view class="sw_choose_default padding-top-20 "
						:class="index==TabCur?'sw_choosenewyear':'sw_nochoose'" v-for="(item,index) in tap" :key="index"
						@tap="tabSelect" :data-id="index">
						{{tap[index]}}
						<view class="h-6 w-40 " style="background-color: #F78D03;margin: 10rpx auto 0;"
							v-show="index==TabCur">

						</view>
					</view>
				</scroll-view>

				<!-- 新年皮肤 -->
				<scroll-view scroll-x class="nav Afont  padding-left-30 padding-bottom-30" scroll-with-animation
					:scroll-left="scrollLeft" v-if="skin == 'qing'">
					<view class="sw_choose_default padding-top-20 "
						:class="index==TabCur?'sw_chooseqing':'sw_nochooseqing'" v-for="(item,index) in tap"
						:key="index" @tap="tabSelect" :data-id="index">
						{{tap[index]}}
						<view class="h-6 w-40 " style="background-color: #1B431B;margin: 10rpx auto 0;"
							v-show="index==TabCur">

						</view>
					</view>
				</scroll-view>

				<!-- 冬季皮肤 -->
				<scroll-view scroll-x class="nav Afont  padding-left-30 padding-bottom-30" scroll-with-animation
					:scroll-left="scrollLeft" v-if="skin == 'winter'">
					<view class="sw_choose_default padding-top-20 "
						:class="index==TabCur?'sw_choosewinter':'sw_nochoose'" v-for="(item,index) in tap" :key="index"
						@tap="tabSelect" :data-id="index">
						{{tap[index]}}
						<view class="h-6 w-40 " style="background-color: #5F5D93;margin: 10rpx auto 0;"
							v-show="index==TabCur">

						</view>
					</view>
				</scroll-view>
			</view>

			<view class="winter_img1 h-100" v-if="skin == 'winter'">
				<image class="h100 w100" :src="Imgbase + '/winter_goodindex_img2.png'" mode="aspectFit">
				</image>
			</view>

			<view class="newyear_img1 h-100" v-if="skin == 'newyear'">
				<image class="h100 w100" :src="Imgbase + '/newyear_goodindex_img2.png'" mode="aspectFill">
				</image>
			</view>
		</view>

		<view class="flex-between padding-left-20 padding-right-20" :style="[{height:TabCur==0?'320rpx':'0rpx'}]"
			style="transition: .5s;">
			<view class="h100" style="width: 31%;" @click="gopage(0)">
				<image class="h100" :src="Imgbase + '/new_goodindex_img1.png'" mode="aspectFit">
				</image>
			</view>
			<view class="h100" style="width: 66%;">
				<!-- <view class="w100">
					<image @click="gopage(2)" style="transition: .5s;" :style="[{height:TabCur==0?'155rpx':'0rpx'}]"
						:src="Imgbase + '/new_goodindex_imggood.png'" mode="aspectFit">
					</image>
				</view> -->

				<view class="w100 h-155 margin-bottom-10" style="position: relative;">
					<view class="btn_left h100" @click="gopage(2)">

					</view>
					<view class="btn_right h100" @click="gopage(4)">

					</view>

					<view class="posimg w100">
						<!-- 	<image class="img1" style="transition: .5s;" :style="[{height:TabCur==0?'155rpx':'0rpx'}]"
							:src="Imgbase + '/new_goodindex_imga1.jpg'" mode="aspectFit">
						</image> -->

						<image class="w100" style="transition: .5s;" :style="[{height:TabCur==0?'155rpx':'0rpx'}]"
							:src="Imgbase + '/new_goodindex_imggood1.png'" mode="aspectFit">
						</image>
					</view>
				</view>

				<view class="w100 h-155" style="position: relative;">
					<view class="btn_left h100" @click="gopage(1)">

					</view>
					<view class="btn_right h100" @click="gopage(5)">

					</view>

					<view class="posimg w100">
						<image class="img1" style="transition: .5s;" :style="[{height:TabCur==0?'155rpx':'0rpx'}]"
							:src="Imgbase + '/new_goodindex_imga1.jpg'" mode="aspectFit">
						</image>

						<image class="img2" style="transition: .5s;" :style="[{height:TabCur==0?'155rpx':'0rpx'}]"
							:src="Imgbase + '/new_goodindex_imga2.png'" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
		</view>

		<view class="w100 fff Bfont font-40 flex-between padding-left-25 padding-right-25">

			<view class="h-100" style="width: 47%;" @click="gopage(6)">
				<image class="w100 h-100" :src="Imgbase + '/new_goodindex_imgn5.png'" mode="aspectFit">
				</image>
			</view>

			<view class="h-100" style="width: 47%;" @click="gopage(3)">
				<image class="w100 h-100" :src="Imgbase + '/new_goodindex_diy.png'" mode="aspectFit">
				</image>
			</view>

		</view>

		<!-- 新品速递  经典皮肤 -->
		<view v-if="skin == 'classics'">
			<!-- <view class="w100 h-230 padding-left-20 padding-right-20 margin-top-10" @click="gopage(3)" >
				<image class="h100 w100" :src="Imgbase + '/classics_goodindex_img3.png'" mode="aspectFit">
				</image>
			</view> -->


			<view class="padding-left-10" style="position: relative;">
				<image class="w100 h-100" :src="Imgbase + '/new_goodindex_img3.png'" mode="aspectFit">
				</image>

				<view class="" style="position: absolute;right: 50rpx;top:50rpx;">
					<picker ref="orderPicker" @change="orderPickerChange" :value="orderindex" :range="orderpicker"
						style="text-align: center;">
						<u-button type="primary" text="排序" size="mini" color="#8B523B"></u-button>
					</picker>
				</view>
			</view>
		</view>

		<!-- 新品速递  新年皮肤 -->
		<view v-if="skin == 'newyear'" style="margin-bottom: -20rpx;">
			<!-- <view class="w100 h-230 padding-left-20 padding-right-20 margin-top-10" @click="gopage(3)" >
				<image class="h100 w100" :src="Imgbase + '/classics_goodindex_img3.png'" mode="aspectFit">
				</image>
			</view> -->


			<view class="padding-left-20 padding-right-20" style="position: relative;">
				<image class="w100 h-100" :src="Imgbase + '/newyear_goodindex_img4.png'" mode="aspectFill">
				</image>

				<view class="" style="position: absolute;right: 100rpx;top:38rpx;">
					<picker ref="orderPicker" @change="orderPickerChange" :value="orderindex" :range="orderpicker"
						style="text-align: center;">
						<u-button type="primary" text="排序" size="mini" color="#DB1224"></u-button>
					</picker>
				</view>
			</view>
		</view>

		<!-- 新品速递  春季皮肤 -->
		<view v-if="skin == 'qing'" class="padding-top-15">
			<!-- <view class="w100 h-230 padding-left-20 padding-right-20 margin-top-25" @click="gopage(3)">
				<image class="h100 w100" :src="Imgbase + '/winter_goodindex_img3.png'" mode="aspectFill">
				</image>
			</view> -->

			<view class="padding-left-10" style="position: relative;">
				<image style="width: 70%;" class="h-90" :src="Imgbase+'/qing_goodindex_img4.png'" mode="aspectFit">
				</image>

				<view class="" style="position: absolute;right: 50rpx;top:30rpx;">
					<picker ref="orderPicker" @change="orderPickerChange" :value="orderindex" :range="orderpicker"
						style="text-align: center;">
						<u-button type="primary" text="排序" size="mini" color="#8B523B"></u-button>
					</picker>
				</view>
			</view>
		</view>


		<!-- 新品速递  冬季皮肤 -->
		<view v-if="skin == 'winter'" class="padding-top-15">
			<!-- <view class="w100 h-230 padding-left-20 padding-right-20 margin-top-25" @click="gopage(3)">
				<image class="h100 w100" :src="Imgbase + '/winter_goodindex_img3.png'" mode="aspectFill">
				</image>
			</view> -->

			<view class="padding-left-10" style="position: relative;">
				<image style="width: 70%;" class="h-70" :src="Imgbase+'/winter_goodindex_img4.png'" mode="aspectFit">
				</image>

				<view class="" style="position: absolute;right: 50rpx;top:30rpx;">
					<picker ref="orderPicker" @change="orderPickerChange" :value="orderindex" :range="orderpicker"
						style="text-align: center;">
						<u-button type="primary" text="排序" size="mini" color="#8B523B"></u-button>
					</picker>
				</view>
			</view>
		</view>

		<!-- 新品速递  冬季皮肤 -->
		<view v-if="skin == 'summer'" class="padding-top-15">
			<!-- <view class="w100 h-230 padding-left-20 padding-right-20 margin-top-25" @click="gopage(3)">
				<image class="h100 w100" :src="Imgbase + '/winter_goodindex_img3.png'" mode="aspectFill">
				</image>
			</view> -->

			<view class="padding-left-20" style="position: relative;">
				<image class="w-200 h-70" :src="Imgbase+'/summer_goodindex_img4.png'" mode="aspectFit">
				</image>

				<view class="" style="position: absolute;right: 50rpx;top:30rpx;">
					<picker ref="orderPicker" @change="orderPickerChange" :value="orderindex" :range="orderpicker"
						style="text-align: center;">
						<u-button type="primary" text="排序" size="mini" color="#5C5C92"></u-button>
					</picker>
				</view>
			</view>
		</view>

		<view class="padding-left-25 padding-right-25 padding-top-18" style="overflow: hidden;">

			<!-- 夏季皮肤 -->
			<view class="items_box h-325 radius-15 padding-left-12 padding-right-12" v-for="(item,index) in list"
				:key="index" @click="showGood(item.id)" v-if="skin == 'summer'"
				:style="{background:'url('+Imgbase+'/summer_goodindex_img5.png)','background-size':'100% 100%',}">

				<view class="" style="margin-top: -15rpx;position: relative;">
					<image class="radius-15 h-250 w-327" :src="item.adimage" mode="aspectFill">
					</image>
					<view class="Afont font-18 text-ff" style="" v-if="item.keywords == '双F'">
						此奖池本周日晚10:30下架
						<view class="">
							介意勿拍
						</view>
					</view>
				</view>
				<view class="flex alc">
					<view class="Afont font-14 quanju flex-center margin-top-2 margin-right-5">
						{{item.keywords}}
					</view>
					<view class="Afont font-22 one-line" style="width: 52%;">
						{{item.name}}
					</view>
					<view class="price Bfont font-24">
						￥{{item.cost}}
					</view>
				</view>
				<view class="jindu margin-top-15 text-center Afont font-16">
					<view class="" style="position: relative;z-index: 10;">
						{{item.count}}/{{item.number}}
					</view>
					<view v-if="item.number == 66 && item.count<11" class="jin_s"
						:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
					</view>
					<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
						style="background-color: #2B9C35;">

					</view>
				</view>
			</view>

			<!-- 新年皮肤 -->
			<view class="items_box h-325 radius-15 padding-left-12 padding-right-12" v-for="(item,index) in list"
				:key="index" @click="showGood(item.id)" v-if="skin == 'newyear'"
				:style="{background:'url('+Imgbase+'/newyear_goodindex_img5.png)','background-size':'100% 100%',}">

				<view class="" style="margin-top: -15rpx;position: relative;">
					<image class="radius-15 h-250 w-327" :src="item.adimage" mode="aspectFill">
					</image>
					<view class="Afont font-18 text-ff" style="" v-if="item.keywords == '双F'">
						此奖池本周日晚10:30下架
						<view class="">
							介意勿拍
						</view>
					</view>
				</view>
				<view class="flex alc">
					<view class="Afont font-14 quanjunewyear flex-center margin-top-2 margin-right-5 fff">
						{{item.keywords}}
					</view>
					<view class="Afont font-22 one-line" style="width: 52%;color: #F9FADA;">
						{{item.name}}
					</view>
					<view class="pricenewyear Bfont font-24">
						￥{{item.cost}}
					</view>
				</view>
				<view class="jindu margin-top-15 text-center Afont font-16">
					<view class="" style="position: relative;z-index: 10;">
						{{item.count}}/{{item.number}}
					</view>
					<view v-if="item.number == 66 && item.count<11" class="jin_s"
						:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
					</view>
					<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
						style="background-color: #2B9C35;">

					</view>
				</view>
			</view>

			<!-- 春季皮肤 -->
			<view class="items_box h-325 radius-15 padding-left-12 padding-right-12" v-for="(item,index) in list"
				:key="index" @click="showGood(item.id)" v-if="skin == 'qing'"
				:style="{background:'url('+Imgbase+'/qing_goodindex_img5.png)','background-size':'100% 100%',}">

				<view class="" style="margin-top: -15rpx;position: relative;">
					<image class="radius-15 h-250 w-327" :src="item.adimage" mode="aspectFill">
					</image>
					<view class="Afont font-18 text-ff" style="" v-if="item.keywords == '双F'">
						此奖池本周日晚10:30下架
						<view class="">
							介意勿拍
						</view>
					</view>
				</view>
				<view class="flex alc">
					<view class="Afont font-14 quanjuqing flex-center margin-top-2 margin-right-5 fff">
						{{item.keywords}}
					</view>
					<view class="Afont font-24 one-line nameqing" style="width: 52%;">
						{{item.name}}
					</view>
					<view class="price Bfont font-24">
						￥{{item.cost}}
					</view>
				</view>
				<view class="jindu margin-top-15 text-center Afont font-16">
					<view class="" style="position: relative;z-index: 10;">
						{{item.count}}/{{item.number}}
					</view>
					<view v-if="item.number == 66 && item.count<11" class="jin_s"
						:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
					</view>
					<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
						style="background-color: #2B9C35;">

					</view>
				</view>
			</view>


			<!-- 经典皮肤  冬季皮肤 -->
			<view class="items_box h-325 radius-15 padding-left-12 padding-right-12" v-for="(item,index) in list"
				:key="index" @click="showGood(item.id)" :class="skin == 'classics'?'skinco':'skinwinter'"
				v-if="skin == 'winter'||skin == 'classics'">

				<view class="" style="margin-top: -15rpx;position: relative;">
					<image class="radius-15 h-250 w-327" :src="item.adimage" mode="aspectFill">
					</image>
					<view class="Afont font-18 text-ff" style="" v-if="item.keywords == '双F'">
						此奖池本周日晚10:30下架
						<view class="">
							介意勿拍
						</view>
					</view>
				</view>
				<view class="flex alc">
					<view class="Afont font-14 quanju flex-center margin-top-2 margin-right-5">
						{{item.keywords}}
					</view>
					<view class="Afont font-22 one-line" style="width: 52%;">
						{{item.name}}
					</view>
					<view class="price Bfont font-24">
						￥{{item.cost}}
					</view>
				</view>
				<view class="jindu margin-top-15 text-center Afont font-16">
					<view class="" style="position: relative;z-index: 10;">
						{{item.count}}/{{item.number}}
					</view>
					<view v-if="item.number == 66 && item.count<11" class="jin_s"
						:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
					</view>
					<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
						style="background-color: #2B9C35;">

					</view>
				</view>
			</view>
		</view>


		<view style="position: fixed;right: 1%;bottom: 20%;z-index: 999;">
			<image class="refresh_icon" :style="{'transform': 'rotate('+360*refreshtime+'deg)','transition': 'all 1s'}"
				@click="startR" :src="Imgbase+'/'+skin+'_goodpoor_img6.png'" mode="aspectFit"></image>
		</view>
		<view style="width: 100%;height: 140upx;"></view>
		<view style="clear: both;"></view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/icon.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>

		<!-- 经典皮肤 -->
		<view class="w100 h-160 tabbars " v-if="skin == 'classics'">
			<view class="flex-between h-140" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-120 h-140 text-center padding-bottom-10">
						<image :src=" Imgbase+'/new_good_tab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-10" @click="seletab(5)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/new_good_tab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcs">

			</view>
			<view class="bgcs_top">

			</view>
		</view>

		<!-- 冬季皮肤 -->
		<view class="w100 h-160 tabbars " v-if="skin == 'winter'">
			<view class="flex-between h-140" style="position: relative;z-index: 9999;">
				<view class="padding-bottom-50" @click="seletab(1)">
					<view class="w-130 h-150 text-center ">
						<image :src=" Imgbase+'/winter_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-15" @click="seletab(2)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/winter_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-20" @click="seletab(3)">
					<view class="w-125 h-125 text-center">
						<image :src=" Imgbase+'/winter_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-115 h-115 text-center">
						<image :src=" Imgbase+'/winter_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-15" @click="seletab(5)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/winter_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcswinter">

			</view>
			<view class="bgcs_topwinter">

			</view>
		</view>

		<!-- 新年皮肤 -->
		<view class="w100 h-160 tabbars " v-if="skin == 'newyear'">
			<view class="flex-between h-120" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-120 h-120 text-center ">
						<image :src=" Imgbase+'/newyear_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-10" @click="seletab(5)">
					<view class="w-120 h-120 text-center">
						<image :src=" Imgbase+'/newyear_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcsnewyear w100 h-200"
				:style="{background:'url('+Imgbase+'/newyear_goodbgc.png)','background-size':'100% 100%',}">

			</view>
		</view>

		<!-- 春季皮肤 -->
		<view class=" padding-bottom-25 w100 h-160 tabbars " v-if="skin == 'qing'">
			<view class="flex-between h-120" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-130 h-130 text-center ">
						<image :src=" Imgbase+'/qing_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-top-10" @click="seletab(5)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/qing_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcsqing w100 h-110"
				:style="{background:'url('+Imgbase+'/qing_goodbgc.png)','background-size':'100% 100%',}">

			</view>
		</view>

		<!-- 夏季皮肤 -->
		<view class=" padding-bottom-25 w100 h-160 tabbars " v-if="skin == 'summer'">
			<view class="flex-between h-120" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/summer_goodtab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view class="w-140 h-130 text-center">
						<image :src=" Imgbase+'/summer_goodtab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view class="w-130 h-130 text-center ">
						<image :src=" Imgbase+'/summer_goodtab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view class="w-140 h-140 text-center">
						<image :src=" Imgbase+'/summer_goodtab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-top-10" @click="seletab(5)">
					<view class="w-130 h-130 text-center">
						<image :src=" Imgbase+'/summer_goodtab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcsqing w100 h-110"
				:style="{background:'url('+Imgbase+'/summer_goodbgc.png)','background-size':'100% 100%',}">

			</view>
		</view>

		<!-- 新手必看弹窗 -->
		<u-modal :show="xinshow" title="新手必看" :content='explain1' closeOnClickOverlay @close="xinclose"
			@confirm="xinclose" confirmColor="#EFB165"></u-modal>

		<!-- 皮肤选择 -->
		<u-picker :show="skinshow" :columns="zh_columns" @cancel="skinshow = false" @confirm="chooseskin"
			closeOnClickOverlay></u-picker>

		<u-toast ref="uToast"></u-toast>

		<!-- 播报 -->
		<view class="fly Afont " v-show="flytype">
			<view class="df">
				<view class="bgc padding-15 radius-10">

					<view class="text flywidth font-30">
						{{flytext}}
					</view>
				</view>

				<view class="w-40 h-40 flyimg" @click="flytype = false">
					<image :src=" Imgbase+'/new_goodaddress_img1.png'" mode="aspectFit" class="w100 h100">
					</image>
				</view>
			</view>
			<view class="margin-auto w-150 h-50 padding-top-15">
				<u-button size="mini" @click="rollCoupon()" color="#FF8400" text="领取good豆"></u-button>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pagename: 'goodspoor',
				PageCur: 1,
				Imgbase: getApp().globalData.Imgbase,
				refreshtime: 0,
				swiperList: [],
				TabCur: 0,
				scrollLeft: 0,
				tap: [],
				ids: [],
				list: [],
				page: 1,
				count: 0,
				hasData: true,
				keyword: '',
				orderpicker: ['最新发售', '价格升序', '价格降序', '剩余升序', '剩余降序'],
				orderids: [1, 2, 3, 4, 5],
				orderindex: 0,
				orderid: 1,
				loadModal: false,
				poor_type: uni.getStorageSync('poor_type') || 0,
				heights: '',
				marginl: '',
				value1: 0,
				logins: '',
				tokens: '',
				tokends: '',
				tokenas: '',
				explain1: '',
				small_list: [],
				xinshow: false,
				explain2: '',
				skin: 'classics',
				skinshow: false,
				columns: [],
				zh_columns: [],
				flytext: '',
				flytype: false,
				moveDistance: 0,
				level: 0
			};
		},
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: '',
				path: '/pages/index/kpindex',
				imageUrl: 'https://oqyf-1305090490.cos.ap-shanghai.myqcloud.com/front/1zhan_new_logo.png',
			}
		},
		mounted() {
			// _this.login();

		},
		onLoad() {
			let _this = this;
			uni.hideTabBar()

			this.judgePlatForm()
			this.showbue()
			this.exshuo()
			this.Init();

			this.ranking()
		},
		onShow() {
			if (uni.getStorageSync('skin')) {

				this.skin = uni.getStorageSync('skin')

			}
			this.skins()
			this.userFront()
		},
		onReady() {
			let _this = this
			setTimeout(() => {
				_this.calculateTextSize()
			}, 100);
		},
		methods: {
			// 获取等级信息
			async userFront() {
				let _this = this;
				let item = await this.$api.post('Userways/userFront', {
					token: uni.getStorageSync('token'),
				})
				this.level = item.data.level_mes.level
			},
			// 领取good豆
			async rollCoupon() {
				let _this = this
				let item = await this.$api.post('user/rollCoupon', {
					token: uni.getStorageSync('token'),
				})

				if (item.code == '1') {
					_this.$refs.uToast.show({
						message: item.msg,
					})
					_this.flytype = false

				}

			},
			// 检测排行榜前三
			async ranking() {
				let _this = this
				let item = await this.$api.post('rank/ranking', {
					token: uni.getStorageSync('token'),
				})
				_this.flytext = item.roll

				if (_this.flytext == '') {
					_this.flytype = false
				}

				if (_this.flytext !== '') {
					_this.flytype = true
				}
			},
			calculateTextSize() {
				let _this = this
				// 获取文本内容宽度
				const query = uni.createSelectorQuery().in(this)
				query.select('.fly').boundingClientRect(rect => {
					_this.moveDistance = rect.width + 'rpx'
					console.log(_this.moveDistance)
				}).exec()
			},
			chooseskin(e) {
				this.skinshow = false
				this.setSkin(this.columns[e.indexs[0]])
			},
			// 设置皮肤
			async getSkin() {
				let _this = this
				let item = await this.$api.post('user/skins', {
					token: uni.getStorageSync('token'),
				})

				uni.setStorageSync('skin', item.data.skin);
				this.skin = item.data.skin
			},
			// 选择皮肤接口
			async setSkin(e) {
				let _this = this
				let item = await this.$api.post('user/setSkin', {
					token: uni.getStorageSync('token'),
					skin: e
				})
				if (item.code == '1') {
					this.getSkin()

					this.$refs.uToast.show({
						message: item.msg,
					})
				}
			},
			// 皮肤选择
			async skins() {
				let _this = this
				let item = await this.$api.post('user/skins', {
					token: uni.getStorageSync('token'),
				})
				this.zh_columns = []
				this.zh_columns.push(item.data.zh_list)
				this.columns = item.data.list
			},
			// 邮寄说明
			exshuo() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Index/explain',
					data: {
						id: 19
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.explain2 = res.data.data.desc.content;
					}
				});
			},
			gopage(e) {
				let _this = this
				switch (e) {
					case 0: //无底池
						uni.navigateTo({
							url: '/pagesA/infinite/index'
						})
						break;
					case 1: // 免费抽奖
						uni.navigateTo({
							url: '/pagesA/advanced/free'
						})
						break;
					case 2: // 摘星赏
						uni.navigateTo({
							url: '/pagesA/newpage/index'
						})
						break;
					case 3: // diy商城
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '此功能正在开发中'
						// });
						// return

						if (_this.level < 2) {
							uni.showToast({
								icon: 'none',
								title: 'VIP2及以上可以使用此功能'
							});
						} else {
							uni.navigateTo({
								url: '/pagesA/userplay/userindex'
							})
						}
						break;
					case 4: // good赏
						uni.navigateTo({
							url: '/pagesA/GoodAward/list'
						})
						break;
					case 5: // 暗夜赏
						uni.navigateTo({
							url: '/pagesA/goodspoor/index'
						})
						break;
					case 6: // 免费模式
						if (_this.level < 2) {
							uni.showToast({
								icon: 'none',
								title: 'VIP2及以上可以使用此功能'
							});
						} else {
							uni.navigateTo({
								url: '/pagesA/free/index'
							})
						}
						break;
				}
			},
			// 关闭新手必看弹窗
			xinclose() {
				this.xinshow = false
			},
			topicon(e) {
				switch (e) {

					case 0: // 新手必看
						this.goon()
						return
						this.xinshow = true
						break;

					case 1: // 切换皮肤
						this.skinshow = true
						return
						uni.navigateTo({
							url: '/pagesA/newpage/laxin'
						})
						break;
					case 2: // 积分商城
						uni.navigateTo({
							url: '/pages/goodspoor/scoreshop'
						})
						break;
					case 3: // 每日签到
						this.goon()
						return
						uni.navigateTo({
							url: '/pages/goodspoor/signin'
						})
						break;

					case 4: // 特价商城
						uni.switchTab({
							url: '/pages/index/kpindex'
						})
						break;
				}
			},
			// 新手必看
			showbue() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Index/explain',
					data: {
						id: 20
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.explain1 = res.data.data.desc.content;
					}
				});
			},
			goon() {
				uni.showToast({
					icon: 'none',
					title: '此功能正在开发中'
				});
			},
			seletab(i) {
				this.PageCur = i
				switch (i) {
					case 1:
						uni.switchTab({
							url: '/pages/goodspoor/index'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/goodspoor/backpack'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/index/kpindex'
						})
						break;
					case 4:
						uni.switchTab({
							url: '/pages/goodspoor/socity'
						})
						break;
					case 5:
						uni.switchTab({
							url: '/pages/goodspoor/user'
						})
						break;
				}
			},
			click1(e) {
				switch (e) {
					case 0:
						this.PageCur = 'goodspoor'
						break;
					case 1:
						console.log(e)
						uni.preloadPage({
							url: '/pages/goodspoor/backpack'
						})
						break;
					case 2:
						this.PageCur = 'socity'
						break;
					case 3:
						this.PageCur = 'myluck'
						break;
				}
			},
			changepoorType(poor_type) {
				let _this = this

				this.poor_type = poor_type;
				uni.setStorageSync('poor_type', poor_type);
				this.TabCur = 0;

				if (poor_type == 2) {
					_this.page = 1;
					_this.list = [];
					_this.hasData = true;
					_this.tap = [];
					_this.ids = [];
					_this.loadlist();
				} else {
					this.loadtypes();
				}
			},
			orderPickerChange(e) {
				this.orderindex = e.detail.value
				this.orderid = this.orderids[this.orderindex]
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.loadlist();
			},
			search() {
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.loadlist();
			},
			startR() {
				if (getApp().globalData.couldFresh == true) {
					getApp().globalData.couldFresh = false;
					setTimeout(() => {
						getApp().globalData.couldFresh = true;
					}, 1000)
				} else {
					return;
				}
				this.refreshtime += 1;
				let _this = this;
				_this.loadModal = true;
				this.page = 1;
				//this.list = [];
				this.hasData = true;
				this.loadlist(200, true);
			},
			async Minlogin(code) {
				let _this = this;
				let item = await this.$api.post('Minlogin/login', {
					code: code,
					ver: this.$mpVer,
					use: 'ceshi'
				})
				if (item.code == '1') {
					uni.setStorageSync('token', item.data.token);

				} else {
					uni.showToast({
						icon: 'none',
						title: '登录失败'
					});
				}
				// _this.tokenas = uni.setStorageSync('token','5dc6e2ba-7efe-465d-8dcd-6f64201613d8')
				uni.setStorageSync('token', '5dc6e2ba-7efe-465d-8dcd-6f64201613d8')

			},
			login() {
				let _this = this;
				let t = this;
				if (uni.getStorageSync('token') == '') {
					/*uni.reLaunch({
						url: `/pages/login/login`
					});*/

					wx.showModal({
						title: '温馨提示',
						content: '正在请求您的个人信息',
						success(res) {
							if (res.confirm) {


								uni.login({
									provider: 'weixin',
									success: function(loginRes) {
										let code = loginRes.code;
										console.log(code);
										// _this.tokens = code
										// t.Minlogin(code)
										// return
										// uni.hideLoading();
										// uni.showToast({
										// 	icon: 'none',
										// 	title: '测试app跳转'
										// });

										uni.request({
											url: _this.$globals.apibase +
												'/api/Minlogin/login',
											data: {
												code: code,
												// avatar: res.userInfo
												// 	.avatarUrl,
												// nickname: res.userInfo
												// 	.nickName,
												// gender: res.userInfo
												// 	.gender,
												// encryptedData: res
												// 	.encryptedData,
												// iv: res.iv,
												ver: _this.$mpVer,
												use: 'ceshi'
											},
											method: 'POST',
											header: {
												'content-type': 'application/json'
											},
											success: (res) => {
												uni.showToast({
													icon: 'none',
													title: res.data.msg
												});
												_this.tokends = res.data.msg
												// _this.tokenas = res.data.data.token
												if (res.data.code ==
													'1') {
													uni.setStorageSync(
														'token',
														res.data
														.data.token
													);
													try {
														uni.setStorageSync(
															'token',
															res
															.data
															.data
															.token
														);
														//在此运行代码
													} catch (err) {
														_this.tokens =
															'缓存失败'
														//在此处理错误
														uni.showToast({
															icon: 'none',
															title: '储存失败'
														});
													}
												} else {
													uni.showToast({
														icon: 'none',
														title: '登录失败'
													});
												}

												let token = uni
													.getStorageSync(
														'token'
													);
												if (token != '') {
													uni.showToast({
														icon: 'none',
														title: '登录成功'
													});
												} else {
													uni.showToast({
														icon: 'none',
														title: '登录失败'
													});
												}
												uni.hideLoading();
											},
											fail: (res) => {
												console.log(res)
												_this.tokens = res.errMsg
												_this.tokenas = res.errno
												uni.showToast({
													icon: 'none',
													title: '用户登录失败'
												});
											}
										});
									},
								});



							}
						}
					})
				} else {}
			},
			showSwiper(url) {
				if (url == '') {

				} else {
					uni.navigateTo({
						url: `/pages/goodspoor/web?url=${url}`
					});
				}
			},
			judgePlatForm() {

			},
			showGood(id) {
				let lookurl = '';
				if (this.poor_type == 0) {
					lookurl = `/pagesA/goodspoor/poordetail?id=${id}`;
				}
				if (this.poor_type == 1) {
					lookurl = `/pagesA/goodspoor/poordetail?id=${id}`;
				}
				if (this.poor_type == 2) {
					lookurl = `/pagesA/advanced/hidpoordetail?id=${id}`;
				}
				uni.navigateTo({
					url: lookurl
				});
			},
			tabSelect(e) {
				this.small_list = []
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.loadlist();
			},
			getWheels() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckgoods/wheel',
					data: {},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.swiperList = res.data.data.list;
					}
				});
			},
			loadtypes() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckgoods/type',
					data: {
						type: _this.poor_type,
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.page = 1;
						_this.list = [];
						_this.hasData = true;
						_this.tap = res.data.data.names;
						_this.ids = res.data.data.ids;
						_this.tap.unshift('推荐')
						_this.ids.unshift(-1)
						_this.loadlist();
					}
				});
			},
			loadlist(point = 0, isfresh = false) {
				console.log(1111111111111111)
				let _this = this;
				_this.loadModal = true;
				let lookurl = '';
				if (_this.poor_type == 0 || _this.poor_type == 2) {
					lookurl = _this.$globals.apibase + '/api/Luckgoods/poorlist';
				}
				if (_this.poor_type == 1) {
					lookurl = _this.$globals.apibase + '/api/Luckgoods/poorlist';
				}
				uni.request({
					url: lookurl,
					data: {
						page: _this.page,
						id: _this.ids[_this.TabCur] == -1 ? 0 : _this.ids[_this.TabCur],
						keyword: _this.keyword,
						orderid: _this.orderid,
						token: uni.getStorageSync('token'),
						is_hidden: _this.poor_type == 2 ? 1 : 0
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							if (_this.poor_type == 0 && _this.ids[_this.TabCur] == 0) {
								_this.small_list = res.data.data.small_list
							} else {
								_this.small_list = []
							}
							if (isfresh == true) {
								_this.list = [];
							}
							_this.count = res.data.data.count;
							for (let i = 0; i < res.data.data.list.length; i++) {
								_this.list = _this.list.concat(res.data.data.list[i])
							}
							console.log(_this.list)
							if (_this.list.length >= _this.count) {
								_this.hasData = false
							}
							if (point != 0) {
								uni.createSelectorQuery().select(".app").boundingClientRect(
									data => { //目标节点
										uni.createSelectorQuery().select(".al").boundingClientRect(
											(
												res) => { //最外层盒子节点
												uni.pageScrollTo({
													duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
													scrollTop: point, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
												})
											}).exec()
									}).exec();
							}
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
			Init() {
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.keyword = '';
				this.getWheels();
				this.loadtypes();
			},
		},
		onReachBottom() {
			let _this = this
			if (_this.hasData) {
				_this.page++;
				_this.loadlist();
			}
		},
	}
</script>

<style lang="less" scoped>
	@keyframes mydonghua {
		from {
			// left: 0rpx;
			transform: translateX(0);
		}

		to {
			// left: var(--moveDistance);
			transform: translateX(50vh);
		}
	}




	.fly {
		position: absolute;
		top: 255rpx;
		animation: mydonghua 5s linear 0.5s 999 alternate forwards;

		.flyimg {
			margin-left: -15rpx;
			margin-top: -15rpx;
		}

		:root {
			--rainbow-gradient:
				linear-gradient(-90deg,
					#F34A11 0,
					#2ce597 30%,
					#e7bb18 50%,
					#ff7657 70%,
					#45c1ee 90%,
					#2ce597 100%);
		}

		.bgc {
			background-color: rgba(0, 0, 0, .7);

			.text {
				background-image: var(--rainbow-gradient, #fff);
				background-size: 100%;
				background-repeat: repeat;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				-moz-background-clip: text;
				-moz-text-fill-color: transparent;
				filter: drop-shadow(0 0 2rem #000);
				text-shadow: none !important;

			}
		}
	}

	.posimg {
		position: absolute;
		z-index: 10;

		.img1 {
			width: 55%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.img2 {
			width: 55%;
			position: absolute;
			right: 0;
			top: 0;
			animation: breathing 3s ease-in-out infinite;
		}

		/* 关键帧动画 */
		@keyframes breathing {
			0% {
				opacity: 0.8;
			}

			50% {
				opacity: 1;
			}

			100% {
				opacity: 0.8;
			}
		}
	}

	.btn_left {
		position: absolute;
		top: 0;
		left: 0;
		width: 42%;
		z-index: 11;
	}

	.btn_right {
		position: absolute;
		top: 0;
		right: 0;
		width: 42%;
		z-index: 11;
	}

	.winter_img {
		position: absolute;
		left: 5rpx;
		top: -20rpx;
		z-index: 5;
	}

	.winter_img1 {
		position: absolute;
		left: 0rpx;
		top: 10rpx;
		z-index: 1;
		width: 80%;
	}

	.newyear_img1 {
		position: absolute;
		left: 0rpx;
		top: 10rpx;
		z-index: 1;
		width: 70%;
	}

	.text-ff {
		position: absolute;
		bottom: 15rpx;
		background-color: rgba(255, 255, 255, .5);
		width: 75%;
		text-align: center;
		border-radius: 25rpx;
		left: 12.5%;
		color: #000;
		padding-bottom: 5rpx;
	}

	.skinco {
		background-color: #F0E3CE;
		box-shadow:
			5px 5px 5px #00000014,
			5px -5px 5px #00000014,
			-5px 5px 5px #00000014,
			-5px -5px 5px #00000014;
	}

	.skinwinter {
		background: url('https://oqyf-1305090490.cos.ap-shanghai.myqcloud.com/front/winter_goodindex_img5n.png');
		background-size: 100% 100%;
	}

	.items_box {
		width: 47%;
		float: left;
		margin-right: 5%;
		margin-bottom: 60rpx;

		.quanju {
			color: #ff5555;
			border-radius: 8rpx;
			border: solid 2rpx #ff5555;
			min-width: 45rpx;
			height: 24rpx;
			line-height: 20rpx;
		}

		.quanjunewyear {
			border-radius: 8rpx;
			border: solid 2rpx #FFFFFF;
			min-width: 45rpx;
			height: 24rpx;
			line-height: 20rpx;
		}

		.quanjuqing {
			border-radius: 8rpx;
			border: solid 2rpx #FF5555;
			min-width: 45rpx;
			height: 24rpx;
			line-height: 20rpx;
			color: #FF5555;
		}

		.nameqing {
			color: #EB9414;
		}

		.price {
			color: #e60000;
		}

		.pricenewyear {
			color: #e60000;
			-webkit-text-stroke: 2rpx #fff;
		}

		.jindu {
			width: 314rpx;
			height: 25rpx;
			background-color: #ffffff;
			box-shadow: inset 3rpx 4rpx 18rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 25rpx;
			border: solid 2rpx rgba(255, 255, 255, 0.9);
			position: relative;
			overflow: hidden;
			line-height: 25rpx;

			.jin_s {
				position: absolute;
				height: 100%;
				border-radius: 25rpx;
				z-index: 9;
				top: 0;
				left: 0;
				background-color: red;
			}
		}
	}

	.items_box:nth-child(2n) {
		margin-right: 0;
	}

	.hhfont {
		color: #E7D2C2;
		-webkit-text-stroke: 0.5rpx #795C46;
		text-stroke: 0.5rpx #795C46;
	}

	.left_scr {
		background-color: rgba(0, 0, 0, .3);
	}


	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.refresh_icon {
		height: 80upx;
		width: 80upx;
	}

	.screen-swiper {
		min-height: 0rpx;
	}


	.sw_choose_default {
		display: inline-block;
		padding-right: 50rpx;
	}

	.sw_choose {
		color: #F9FADA;
		-webkit-text-stroke: 3rpx #8B5F52;
		font-size: 36rpx;
	}

	.sw_choosewinter {
		color: #F9FADA;
		-webkit-text-stroke: 3rpx #5F5D93;
		font-size: 36rpx;
	}

	.sw_choosenewyear {
		color: #F9FADA;
		-webkit-text-stroke: 3rpx #F89F12;
		font-size: 36rpx;
	}

	.sw_chooseqing {
		color: #F9FADA;
		-webkit-text-stroke: 3rpx #1B431B;
		font-size: 36rpx;
	}

	.sw_nochooseqing {
		color: #5C7861;
	}

	.sw_nochoose {
		color: #A6A2A2;
	}

	.con_left {
		margin-top: 15rpx;
		float: left;
		margin-left: 3%;
		border-radius: 12rpx;
	}

	.con_right {
		margin-top: 15rpx;
		float: right;
		margin-right: 3%;
		border-radius: 12rpx;
	}

	.robot_bottom {
		width: 91.9%;
		margin-left: 4.6%;
		border: 1px solid black;
		height: 60upx;
		border-radius: 10upx;
	}

	.robot_2_icon {
		height: 47upx;
		width: 55upx;
		margin-top: 4upx;
		margin-left: 13upx;
		float: left;
	}

	.robot_2_notice {
		margin-top: 10upx;
		margin-left: 15upx;
		font-size: 28upx;
		color: black;
		float: left;
		width: 85%;
		line-height: 18px;
	}

	.item_hot {
		position: absolute;
		z-index: 100;
		top: -30rpx;
		right: -28rpx;
	}

	.animation {

		animation-name: shake; // 动画名称
		animation-direction: 10; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
		animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
		animation-delay: 0s; // 动画延迟时间
		animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
		animation-duration: 4s; // 动画完成时间
		animation-fill-mode: backwards;
	}

	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}

		5% {
			transform: rotate(10deg);
		}

		10% {
			transform: rotate(-15deg);
		}

		15% {
			transform: rotate(15deg);
		}

		20% {
			transform: rotate(-15deg);
		}

		25% {
			transform: rotate(15deg);
		}

		30% {
			transform: rotate(-15deg);
		}

		35% {
			transform: rotate(15deg);
		}

		40% {
			transform: rotate(-15deg);
		}

		45% {
			transform: rotate(15deg);
		}

		50% {
			transform: rotate(-15deg);
		}

		55% {
			transform: rotate(15deg);
		}

		60% {
			transform: rotate(-15deg);
		}

		65% {
			transform: rotate(15deg);
		}

		70% {
			transform: rotate(-15deg);
		}

		75% {
			transform: rotate(15deg);
		}

		80% {
			transform: rotate(-15deg);
		}

		85% {
			transform: rotate(15deg);
		}

		90% {
			transform: rotate(-15deg);
		}

		95% {
			transform: rotate(10deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
</style>